animate() jQuery การสร้าง Animation เคลื่อนไหว
บทความวันที่ 19 พฤศจิกายน 2555
animate() คือ คำสั่งของ jQuery ในหมวดของ Effects มีไว้สำหรับการสร้าง Animation หรือสร้างการเคลื่อนไหวให้กับ Elements ต่าง ๆ ที่ต้องการ
ภาพรวมของ animate()
1. ใช้คำสั่ง $('[Target_Element]').animate({'[Direction]':'[Value]'}) สำหรับการสร้าง Animate
2. Elements ที่จะมาสร้าง Elements นั้นแนะนำให้กำหนด CSS Attribute Position เป็น Relative
3. หากต้องการเลื่อนด้านซ้าย และด้านขวาให้กำหนด Direction เป็น Left
4. หากต้องการเลื่อนด้านบน และด้านล่างให้กำหนด Direction เป็น Top
ตัวอย่างโปรแกรม
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>amplysoft.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<style type="text/css">
#box {
position:relative;
background:#cccccc;
width:100px;
height:100px;
}
</style>
<body>
<div id='box'></div>
<br/>
<input type='button' value='right' />
<input type='button' value='left' />
<div id='click'></div>
<script type="text/javascript">
$('input').click(function(){
var v = $(this).val();
var box = $('#box');
if( v == "right" ) {
box.animate({'left':-50});
} else if( v == "left" ) {
box.animate({'left':50});
}
});
</script>
</body>
</html>
ผลลัพธ์
คำค้นหา animate() jQuery, รับทำเว็บ, รับเขียนเว็บ, เรียนเขียนโปรแกรม
